<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>反欺诈大厅</title>
    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>

</head>

<body>
    <div id="app">

        <el-row style="color: #B8860B;">
            <el-col :span="6">
                最小年龄: <el-input-number v-model.number="minAge" :min="0" :max="150" label="最小年龄"
                    controls-position="right" placeholder="请输入最小年龄"></el-input-number>
            </el-col>
            <el-col :span="6">
                最大年龄: <el-input-number v-model.number="maxAge" :min="0" :max="150" label="最大年龄"
                    controls-position="right" placeholder="请输入最大年龄"></el-input-number>
            </el-col>
            <el-col :span="6">
                <el-input v-model="name" placeholder="对原因和名字进行检索" style="color: #B8860B;"></el-input>
            </el-col>
            <el-col :span="6">
                <el-button @click="searchReports" type="primary">搜索</el-button>
                <el-button @click="toggleMyReports">我的举报记录</el-button>

            </el-col>
            <!-- 表格展示举报案例 -->
            <div v-if="!showMyReports">
                <el-table :data="reportList" class="zebra-table" style="width: 100%" row-key="reportId"
                    @row-click="toggleRowExpansion">
                    <el-table-column prop="donationId" label="募捐单ID"></el-table-column>
                    <el-table-column label="举报对象" prop="donationImage">
                        <template slot-scope="scope">
                            <img :src="`http://${scope.row.donationImage}`" style="width: 50px; height: 50px;" />
                            <p>{{ scope.row.alias }} {{ scope.row.age }}岁</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="donationReason" label="原因"></el-table-column>
                    <el-table-column prop="deadline" label="截止时间"></el-table-column>
                    <el-table-column prop="donationAmount" label="募捐目标金额"></el-table-column>
                    <el-table-column prop="donatedAmount" label="已募捐金额"></el-table-column>
                    <el-table-column prop="materialPoints" label="救助积分"></el-table-column>
                    <el-table-column prop="reportId" label="举报单号">
                        <template slot-scope="scope">
                            <span :style="{ color: '#B8860B' }">{{ scope.row.reportId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reportReason" label="被调查的原因"></el-table-column>
                    <el-table-column prop="refundAmount" label="追回金额"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goToDonationDetails(scope.row)">进入募捐详情页</el-button>
                            <el-button type="params"
                                @click="viewInvestigationReport(scope.row.donationId)">下载报告</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

                <div  v-else class="card-container" >
                    <el-row>
                        <el-col :span="8" v-for="(report, index) in myReportList" :key="index">
                          <el-card class="report-card">
                            <img :src="`http://${report.donationImage}`" class="donation-image"
                              style="width: 150px; height: 150px;" />
                            <p class="donation-info">{{ report.alias }} {{ report.age }}岁</p>
                            <p class="report-reason">举报原因:{{ report.reportReason }}</p>
                            <p class="report-info">详细情况说明:{{ report.reportInfo }}</p>
                            <p class="report-status">举报状态：{{ report.status }}</p>
                            <el-button @click="downloadReport(report.reportId)">下载报告</el-button>
                          </el-card>
                        </el-col>
                      </el-row>
                      
                </div>
            


    </div>

    <script>
        var userId = localStorage.getItem('userId')
        var donationId = localStorage.getItem('donationId');
        new Vue({
            el: '#app',
            data: {
                searchReportId: '',
                minAge: '0',
                maxAge: '150',
                name: '',
                searchText: '',
                reportList: [],
                showMyReports: false,
                myReportList: []
            },
            created() {
                this.searchReports()
            },
            methods: {

                searchReports() {
                    axios.get('http://localhost:8888/api/report/reportDonationList', {
                        params: {
                            minAge: this.minAge,
                            oldAge: this.maxAge,
                            name: this.name
                        }
                    }).then(response => {
                        if (response.data.code === 0) {
                            this.reportList = response.data.data;
                            this.calculateCompletion()
                        } else {
                            this.reportList = [];
                            console.log(response.data.message);
                        }
                    }).catch(error => {
                        console.error('搜索失败:', error);
                    });
                },
                toggleRowExpansion(row) {
                    this.$refs.table.toggleRowExpansion(row);
                },
                goToDonationDetails(row) {
                    // 在这里编写跳转逻辑
                    localStorage.setItem("donationId", row.donationId);

                    window.location.href = "./userDonation.html";
                },
                viewInvestigationReport(donationId) {
                    fetch(`http://localhost:8888/api/donation/downloadData?donationId=${donationId}`)
                        .then(response => response.blob())
                        .then(blob => {
                            const url = window.URL.createObjectURL(blob);
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', 'dontionFile.pdf');
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        })
                        .catch(error => {
                            this.$message.error("文件不存在");
                            console.error('Error downloading file:', error);
                            // 处理下载失败的情况
                        });
                },
                fetchMyReports() {
                    axios.get('http://localhost:8888/api/report/queryReportByUserId', {
                        params: { userId: userId }
                    }).then(response => {
                        if (response.data.code === 0) {
                            this.myReportList = response.data.data;
                        } else {
                            this.myReportList = [];
                            console.log(response.data.message);
                        }
                    }).catch(error => {
                        console.error('获取举报记录失败:', error);
                    });
                },
                calculateCompletion() {
                    this.reportList.forEach(item => {
                        // 截取日期部分，只保留年月日
                        item.deadline = item.deadline.substring(0, 10);
                    });
                },
                toggleMyReports() {
    this.showMyReports = !this.showMyReports;
    if (this.showMyReports) {
        this.fetchMyReports();
    }
},

            }
        });
    </script>
</body>

</html>